<template>
	<div class="public_main">
		<div class="crumbs">
      <el-breadcrumb separator="/">
        <template v-if="from=='merchant'">
					<el-breadcrumb-item>{{$t('dashBoard.no2')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('dashBoard.no3')}}</el-breadcrumb-item>
					<el-breadcrumb-item >{{$t('merchantList.no66')}}</el-breadcrumb-item>
				</template>
				<template v-else-if="from=='onemerchant'">
					<el-breadcrumb-item>{{$t('sidebar.operator')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('sidebar.processConfig')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('sidebar.processConfig')}}</el-breadcrumb-item>
				</template>
				<template v-else>
					<el-breadcrumb-item>{{$t('dashBoard.no19')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('dashBoard.no20')}}</el-breadcrumb-item>
        	<el-breadcrumb-item>{{$t('dashBoard.no8')}}</el-breadcrumb-item>
				</template>
        <el-breadcrumb-item>{{$t('flowOfCreditConfig.no2')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

		<!-- 商户名称,商户ID -->
		<div class="oneLineHasOne">
			<p >
				<span>{{$t('merchantList.no8')}}:</span>
				<span>{{partnerNo}}</span>
			</p>
		</div> 
		<div class="oneLineHasOne ">
			<p >
				<span>{{$t('merchantList.no1')}}:</span>
				<span>{{partnerName}}</span>
			</p>
		</div> 
		<p class="mb30"></p>

		<!-- 催收分单设置 -->
		<div class="pos">
			<el-button size="small" v-if="!submenuFlag" type="primary" class="pos-right" @click="changeSubmenu">{{$t('public.no51')}}</el-button>
			<el-button size="small" v-else type="primary" class="pos-right" @click="changeSubmenuSure">{{$t('public.no49')}}</el-button>
			<h3 class="mb20 blue">{{$t('flowOfCreditConfig.no13')}}</h3>
			<el-form ref="addForm" :model="form"  size="small" >
				<el-form-item :label="$t('flowOfCreditConfig.no9')">
					<el-radio-group v-model="form.orderDistFormCollection" >
						<el-radio :label="1" :disabled="!submenuFlag">{{$t('flowOfCreditConfig.no14')}}</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
		</div>
		

		<!-- 催收阶段设置 -->
		<div class="pos">
			<el-button size="small" v-if="!stageFlag" type="primary" class="pos-right" @click="changeStage">{{$t('public.no51')}}</el-button>
			<el-button size="small" v-else type="primary" class="pos-right" @click="changeStageSure">{{$t('public.no49')}}</el-button>
			<h3 class="mb20 blue">{{$t('flowOfCreditConfig.no15')}}</h3>
			<p class="mb10">
				<span style="margin-left:60px">{{$t('flowOfCreditConfig.no16')}}</span>
				<span class="ml100">{{$t('flowOfCreditConfig.no17')}}</span>
			</p>
			<div class="mb10" v-for="(item,i) in processCollectionConfigDOList" :key="i">
				<span class="mr10">stage{{i+1}}:</span>	 
				<el-input size="small" v-model="item.stage" style="width:100px" :disabled="!stageFlag"></el-input>
				<span class="ml30"></span>
				<el-input size="small" style="width:80px" :disabled="!stageFlag||stageFlag&&i>=1" v-model="item.daysStart"></el-input>
				<span class="ml10 mr10">≤{{$t('public.no28')}}≤</span>
				<el-input size="small" type="number" style="width:80px" :disabled="!stageFlag" v-model="item.daysEnd" @change="onCollectionChange(item.forntId)"></el-input>
				<i v-if="i==processCollectionConfigDOList.length-1&&stageFlag" @click="delCollection(item.forntId)" class="el-icon-close f20 ml10"></i>
				
			</div>
			<el-button v-if="stageFlag" @click="addCollection" type="primary" size="small">{{$t('loanAfterOperation.add2')}}</el-button>
			
				
			
		</div>
		
	</div>
</template>

<script>
export default {
	name: 'collectionProcess',
  data () {
    return {
			from: '',
			partnerNo: '',
			partnerId: '',
			partnerName: '',
			stageFlag: false,// 催收阶段修改
			submenuFlag: false,// 催收分单修改
			orderDistFormCollection: '',// 催收分单设置 1.人工分单
			processCollectionConfigDOList: [],
			form: {
				orderDistFormCollection: ''
			}
    }
  },
  methods: {
		changeStage(){
			this.stageFlag = true
		},
		changeStageSure(){
			let flag = true
			if(this.processCollectionConfigDOList == null || this.processCollectionConfigDOList.length <= 0){
				return this.$globalMsg.error(this.$t('long.no8'))
			}
			this.processCollectionConfigDOList.forEach(element => {
				if(element.daysEnd === null || element.daysEnd === ""){
					flag = false
				}
				// element.daysEnd = parseInt(element.daysEnd);
			})
			if(flag){
				let options = {
					param: {
						partnerId: this.partnerId,
						processCollectionConfigDOList: this.processCollectionConfigDOList
					}
				}
				this.$axios.post(this.$action.collection_save, options).then(res => {
					if (res.code == 200) {
						this.$globalMsg.success(this.$t('message.success'))
					}else{
						this.$globalMsg.error(res.message)
					}
					this.stageFlag = false
				})
			}else{
				this.$globalMsg.error(this.$t('long.no9'))
			}
			
			
		},
		changeSubmenu(){
			this.submenuFlag = true
		},
		changeSubmenuSure(){// 分单方式修改
			let options = {
				
        param: {
					partnerId: this.partnerId,
					orderDistFormCollection: this.form.orderDistFormCollection
				}
			}
			this.$axios.post(this.$action.collection_update, options).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'))
        }else{
          this.$globalMsg.error(res.message)
				}
				this.submenuFlag = false
      })
			
		},
		onCollectionChange(forntId){
			let processConfigCustomerDO = this.processCollectionConfigDOList[parseInt(forntId)-1];
			// console.log(processConfigCustomerDO);
			if(parseInt(processConfigCustomerDO.daysEnd) < parseInt(processConfigCustomerDO.daysStart)){
				this.$globalMsg.error(this.$t('long.no10'))
				processConfigCustomerDO.daysEnd = processConfigCustomerDO.daysStart;
				return;
			}
			if(parseInt(forntId) < parseInt(this.processCollectionConfigDOList.length)){
				let processConfigCustomerDONext = this.processCollectionConfigDOList[parseInt(forntId)];
				if(parseInt(processConfigCustomerDO.daysEnd) >= parseInt(processConfigCustomerDONext.daysEnd)){
					processConfigCustomerDO.daysEnd = parseInt(processConfigCustomerDONext.daysStart) - 1;
					this.$globalMsg.error(this.$t('long.no11'))
					return;
				}
				processConfigCustomerDONext.daysStart = parseInt(processConfigCustomerDO.daysEnd) + 1
			}
		},
		delCollection(forntId){
			this.processCollectionConfigDOList = this.processCollectionConfigDOList.filter((e=>{return e.forntId!==forntId}))
		},
		addCollection(){
			if(parseInt(this.processCollectionConfigDOList.length) == 0){
				this.processCollectionConfigDOList.push({ forntId: parseInt(this.processCollectionConfigDOList.length) + 1,stage: '' + (parseInt(this.processCollectionConfigDOList.length) + 1),daysStart: 1,daysEnd: 7})
			}else{
				let processConfigCustomerDO = this.processCollectionConfigDOList[parseInt(this.processCollectionConfigDOList.length)-1];
				if(processConfigCustomerDO.daysEnd === ''){
					this.$globalMsg.error(this.$t('long.no12'))
					return;
				}
				if(parseInt(processConfigCustomerDO.daysEnd) < parseInt(processConfigCustomerDO.daysStart)){
					this.$globalMsg.error(this.$t('long.no10'))
					return;
				}
				this.processCollectionConfigDOList.push({forntId: parseInt(this.processCollectionConfigDOList.length) + 1,stage: '' + (parseInt(this.processCollectionConfigDOList.length) + 1),daysStart: parseInt(processConfigCustomerDO.daysEnd) + 1,daysEnd: ''})
			}
		},
		getDetailData(){
      let option = {
				param:{
					partnerId:this.partnerId, 
				}
            
      }
      this.$axios.post(this.$action.collection_pageinfo, option).then(res => {
        if (res.code == 200) {
          this.partnerName = res.data.partnerName;
          this.partnerNo = res.data.partnerNo;
					// this.orderDistFormCollection = res.data.orderDistFormCollection
					let collectionConfigList = res.data.processCollectionConfigDOList;
					if(collectionConfigList != null && collectionConfigList.length > 0){
						collectionConfigList.forEach((ccl,index) => {
							ccl["forntId"] = index + 1;
						});
					}
					this.processCollectionConfigDOList = collectionConfigList
					this.form.orderDistFormCollection = res.data.orderDistFormCollection
				} else {
          this.$globalMsg.error(res.message)
        }
      })
    }
  },
  mounted () {
		this.from = this.$route.query.from
		this.partnerId = this.$route.query.id
		this.getDetailData()
		
		
  }
}
</script>

<style scoped lang="scss">

.ml100{
	margin-left: 100px;
}
</style>